<template>
  <div class="order_catchyz">
    <div class="team">
      <div class="powertop">
        <top></top>
      </div>
      <div class="centerall">

        <div class="t-img" style="background:#2974FF;padding: 18px 40px; border-radius: 5px;">
          <img src="../../../static/kuanping/order_zhibo.png" style="height: 64px;">
        </div>

        <div class="t-con" v-loading="loading">
          <div style="background: #F6F9FC; color: #333333; padding: 20px 20px; font-size: 13px; border-radius: 2px;">
            <i class="el-icon-warning" style="font-size: 16px; margin-right: 10px; color: #F7273F;"></i>该功能需要上游授权配置，成功添加后您直播间发展的该店铺订单会自动进入我的订单中，您是订单的发展方，注：抓单前请确保您销售的商品已经在敢探号商品管理中添加完成，否则订单无法进入。
          </div>
          <div style="margin: 20px 0;">
            <el-button type="danger" round @click="kai">+ 添加抓单直播间</el-button>
          </div>
          <el-table :data="list" border style="width: 100%">
            <el-table-column prop="downstream_live_room_name" label="直播间名称" align="center"> </el-table-column>
            <el-table-column prop="author_id" label="直播间ID" align="center"> </el-table-column>
            <el-table-column prop="shop_name" label="授权店铺" align="center"> </el-table-column>
            <el-table-column label="授权状态" align="center" prop="auth_status"></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="delbtn(scope.row.id)" type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size" :total="total"></el-pagination>
        </div>
      </div>
    </div>

    <!-- 新增 -->
    <el-dialog title="添加直播间" :visible.sync="isshowadd" width="500px" center="true" :close-on-click-modal="false">
      <div>
        <el-input style="width: 100%;" v-model="all.live_room_name" placeholder="直播间名称"></el-input>
        <el-input style="width: 100%; margin-top: 20px;margin-bottom: 30px;" v-model="all.auth_code" type="textarea" placeholder="授权码"></el-input>
      </div>
      <div style="margin: 20px 0; color: #FF9555;">
        授权码由上游抖店所有者为您生成，配置位置：抓单管理——抖音抓单——店铺列表处的：授权直播间抓单
      </div>
      <div style="text-align: center;">
        <el-button round type="info" @click="isshowadd = false">取 消</el-button>
        <el-button round type="danger" @click="sureadd">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import axios from 'axios'
  import top from '@/components/productionManagement/Azujian/nav.vue'
  export default {
    components: {
      top
    },
    name: "order_zhibo",
    data() {
      return {
        loading: true,
        list: "",
        url: '',
        isshowadd: false,
        inputacc: '',
        inputid: '',

        all:{
          live_room_name:"",
          auth_code:"",
          id:""
        }



      }
    },
    created() {
      //地址配置,用于下载模板
      if (window.location.href.indexOf("91haoka_platform") > -1) {
        console.log("线上项目，谨慎操作。")
        this.url = window.location.origin + "/91haoka_platform/"
      } else {
        this.url = ""
      }
      this.getlist();
    },
    mounted() {

    },
    methods: {

      kai:function(){
        this.all = {
          live_room_name:"",
          auth_code:"",
          id:""
        }

        this.isshowadd = true
      },

      getlist: function() {
        var that = this
        // api/live_order_capture/list?is_upstream=0&page=&page_size=
        axios.get('/api/live_order_capture/list?is_upstream=0&page=1&page_size=300')
          .then(response => {
            if (response.data.msg.code == 0) {
              if (response.data.data != '') {

                this.list = response.data.data.data

                this.loading = false
              } else {
                this.loading = false
              }

            } else {
              this.$message.error(response.data.msg.info);
            }

          })
      },
      copy: function(t) {
        var that = this;
        this.$copyText(t).then(res => {
          that.$message.success("复制成功");
        });
      },
      //删除
      delbtn(id) {
        this.loading = true
        this.$confirm('是否确认删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {


          axios.post('/api/live_order_capture/downstream/delete', {
              id: id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });

                this.getlist();

              } else {
                this.loading = false
                this.$message.error(response.data.msg.info);
              }

            })



        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //下载
      xiazai: function() {

        const a = document.createElement('a');
        a.setAttribute('download', '小红书抓单流程.pdf');
        a.setAttribute('href', this.url + 'static/xhs.pdf');
        a.click();

      },
      xiazai2: function() {

        const a = document.createElement('a');
        a.setAttribute('download', '敢探号地址库.xlsx');
        a.setAttribute('href', this.url + 'static/gthdzk.xlsx');
        a.click();

      },
      //新增
      addshplog() {
        this.isshowadd = true
        this.inputacc = ''
        this.inputid = ''
      },
      //提交
      sureadd() {
        this.loading = true

        axios.post('/api/live_order_capture/downstream/store/live_room', this.all)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.isshowadd = false

              this.getlist()

            } else {
              this.loading = false
              this.$message.error(response.data.msg.info);
            }

          })



      }

    },
  }
</script>
<style scoped>


</style>
<style lang="scss" scoped>
  @import url("../../assets/zuixin.scss");
  .order_catchyz {


    .team {
      background: #F9F9F9;

      .powertop {
        display: flex;
        width: 640px;
      }

      .powertopli {
        flex-basis: 160px;
        line-height: 45px;
        border-top: 4px #F9F9F9 solid;
        color: #727272;
        font-size: 14px;
        text-align: center;
      }

      .powertopact {
        background: #FFFFFF;
        border-top: 4px #DD2727 solid;
      }

      .centerall {
        padding: 20px;
        background: #FFFFFF;
        color: #666;

        .t-img {
          margin-bottom: 20px;
          position: relative;


          .t-email {
            position: absolute;
            background: #FFFFFF;
            color: #DD2727;
            right: 20px;
            padding: 8.5px 15px;
            border-radius: 20px;
            top: 23px;
            margin-right: 10px;
            cursor: pointer;
          }
        }

        .t-con {

          .el-pagination {
            text-align: right;
            margin: 20px 0
          }

          .addshop {
            text-align: center;
            padding: 20px 0;
          }
        }

      }
    }



  }
</style>
